<template>
  <card>
    <card-header>
      <list>
        <item>
          <item-media>
            <img :src="item.info.avatar" alt="" />
          </item-media>
          <item-content>
            <item-title-row>
              <item-title>
                {{item.info.roomName}}
              </item-title>
              <item-title-after>
                <icon-button icon="settings" :click="set"></icon-button>
              </item-title-after>
            </item-title-row>
            <item-sub-title>
              <div class="room-note">
                  <span class="nick">{{item.info.nick}}</span>
                  <span class="time">{{item.data.startTime}} </span>
                  <span class="clock">{{item.data.time|Time}}</span>
                  <span class="{{'state-'+item.data.state.code}}">{{item.data.state.msg}}</span>
              </div>
            </item-sub-title>
          </item-content>
        </item>
      </list>
    </card-header>
    <card-content>
      <grid-row gutter>
        <grid-col width="25">
          <div class="count">
              <span>{{item.info.fans}}</span>
              <span>关注数</span>
          </div>
        </grid-col>
        <grid-col width="25">
          <div class="count">
              <span>{{item.info.online}}</span>
              <span>在线人数</span>
          </div>
        </grid-col>
        <grid-col width="25">
          <div class="count">
              <span>{{item.data.chat}}</span>
              <span>发言人数</span>
          </div>
        </grid-col>
        <grid-col width="25">
          <div class="count">
              <span>{{item.data.msgs}}</span>
              <span>弹幕数</span>
          </div>
        </grid-col>
        <grid-col width="25">
          <div class="count">
              <span>{{item.data.users}}</span>
              <span>新进大号</span>
          </div>
        </grid-col>
        <template v-for="gift in item.gift">
          <grid-col width="25">
            <div class="count">
                <span>{{item.data.count[gift.id]}}</span>
                <span>{{gift.name}}</span>
            </div>
          </grid-col>
        </template>
        <grid-col width="25">
          <div class="count">
              <span>{{item.data.coins|Round}}</span>
              <span>{{item.data.title}}</span>
          </div>
        </grid-col>
      </grid-row>
    </card-content>
    <card-footer v-show="showTool">
      <a class="icon-button" href="javascript:;" :class="buttonClass" title="礼物" v-on:click="showGift(item.platform.concat('_').concat(item.info.roomId))" >
        <img src="../../assets/ic_gift.svg"/>
      </a>
      <a class="icon-button" href="javascript:;" :class="buttonClass" title="统计" v-on:click="showChart(item.platform.concat('_').concat(item.info.roomId))">
        <img src="../../assets/ic_count.svg"/>
      </a>
      <a class="icon-button" href="javascript:;" :class="buttonClass" title="排行榜" v-on:click="showRank(item.platform.concat('_').concat(item.info.roomId))">
        <img src="../../assets/ic_rank.svg" />
      </a>
      <a class="icon-button" href="javascript:;" :class="buttonClass" v-on:click="showMsg(item.platform.concat('_').concat(item.info.roomId))" title="弹幕">
        <img src="../../assets/ic_barrage.svg" />
      </a>
      <a class="icon-button" href="javascript:;" v-on:click="show(index, item.platform, item.info.roomId)" title="删除">
        <img src="../../assets/ic_del.svg"/>
      </a>
    </card-footer>
  </card>
</template>

<script>
import { showDelRoomConfirm, showMsg, showRank, showChart, showGift } from '../../vuex/actions'
export default {
  vuex: {
    actions: {
      show: showDelRoomConfirm,
      showMsg,
      showRank,
      showChart,
      showGift
    }
  },
  data () {
    return {
      showTool: false,
      showVideo: false
    }
  },
  props: {
    item: {
      type: Object
    },
    index: {
      type: Number,
      default: -1
    }
  },
  methods: {
    set () {
      this.showTool = !this.showTool
      this.showVideo = false
    }
  }
}
</script>

<style lang="less">
</style>
